<template>
  <div class="vip-center">

    <!-- <div class="vip-header">
      <div class="user-info">
        <div class="user-avatar">
          <img
            v-if="userInfo.avatar"
            :src="'https://api.touce.com.cn' + userInfo.avatar"
          />
          <img v-else src="@/assets/image/tc_logo_m.png" />
        </div>
        <div class="user-desc">
          <p class="user-name">
            {{ userInfo.userName }}
            <span class="ml-1 text-xl">
              <svg-icon v-if="userInfo.vip == 0" name="userVip" />
              <svg-icon
                v-if="userInfo.vip == 1"
                name="userVip"
                color="#f3b361"
              />
              <svg-icon v-if="userInfo.vip == 2" name="svip" color="#f3b361" />
            </span>
          </p>
          <p class="vip-desc">
            {{
              userInfo.vip == 0
                ? "开通透策会员，尽享全站资源"
                : `会员过期时间: ${userInfo.vipExpirationTime}`
            }}
          </p>
        </div>
      </div>
    </div>
    <div class="vip-content">
      <div class="vip-level-tabs">
        <div
          class="super-vip tab-item"
          :class="currVipType === 'super' ? 'active' : ''"
          @click="changeVipType('super')"
        >
          透策超级会员
        </div>
        <div
          class="base-vip tab-item"
          :class="currVipType === 'base' ? 'active' : ''"
          @click="changeVipType('base')"
        >
          透策会员
        </div>
      </div>
      <div class="vip-level-list">
        <div
          class="vip-level-item"
          v-for="item in vipLevels[currVipType]"
          :class="currVipLevelTypes[currVipType] === item.id ? 'active' : ''"
          :key="item.id"
          @click="changeCurrVipLevelType(item.id)"
        >
          <p class="vip-title">{{ item.name }}</p>
          <p class="vip-price">
            <span>¥</span>{{ item.price }}
            <span
              >/ {{ item.time }}
              <template v-if="item.timeUnit === 'MONTH'">月</template>
              <template v-else-if="item.timeUnit === 'DAY'">天</template>
            </span>
          </p>
          <svg-icon
            v-if="currVipLevelTypes[currVipType] === item.id"
            name="check"
            class="check-icon"
            size="22px"
          />
        </div>
      </div>
    </div>
    <div class="pay-types">
      <p class="title">
        应付金额: <span class="price">{{ payPrice }}元</span>
      </p>
      <div class="qr-codes">
        <div class="code-item">
          <div class="code">
            <qrcode-vue
              v-if="wxQrCode"
              :value="wxQrCode"
              :size="100"
              level="H"
            />
            <div v-else class="w-full h-full" v-loading="true"></div>
          </div>
          <p class="item-title">
            <svg-icon class="mr-2" name="wx_pay" color="#5fce72" />微信支付
          </p>
        </div>
      </div>
    </div> -->

    <div style="margin-bottom:20px">
      <img style="height:376px" src="../../assets/image/vipbg.png"/>
      <!-- <img class="vip" style="position: absolute;top:20px;width: 600px;height: 280px;" src="../../assets/image/vip.png"/> -->
    </div>
    <div>
      <el-carousel style="margin:0 20px;width:80%;margin:auto;" type="card" height="370px" :autoplay="false" indicator-position="none" @change="changeTab">
        <el-carousel-item v-for="(item,index) in vipList" :key="index">
          <div class="carTopbg">
            <img :src="item.url"/>
            <span class="text" text="2xl" justify="center" :style="{color:item.color}">{{ item.name }}</span>
          </div>
          <div class="priceBig">
            <div class="price" v-for="priceItem in item.list" :key="priceItem" :class="[vipType==1&&vipId==priceItem.id?'svipActive':vipType==2&&vipId==priceItem.id?'vipActive':vipType==3&&vipId==priceItem.id?'active':'']"  @click="rechargeVip(priceItem.type,priceItem.id,priceItem)">
              <p style="font-size:14px;color:#2D2D2D">{{priceItem.name}}</p>
              <p style="font-size:18px;font-weight:700;"><span style="font-size:15px;">￥</span>{{priceItem.price}}</p>
              <p style="font-size:12px;">{{priceItem.des}}</p>
              <img v-if="vipType==1&&vipId==priceItem.id" style="height:30px;width:30px" src="../../assets/image/vipSelect.png"/>
              <img v-if="vipType==2&&vipId==priceItem.id" style="height:30px;width:30px" src="../../assets/image/svipSelect.png"/>
              <img v-if="vipType==3&&vipId==priceItem.id" style="height:30px;width:30px" src="../../assets/image/vipSelect.png"/>
            </div>
          </div>
            <!-- <div class="openVip">立即开通</div> -->
          <div class="qrCode">
            <div style="width:70%;line-height:23px">
              <p>到期时间：<span style="margin-left:30px">{{memberExpirationDate}}</span></p>
              <p>实付金额：<span style="margin-left:30px;font-weight:800;color:red">￥{{vipPrice}}</span></p>

              <p style="color:rgb(173, 173, 173)">1、开通前请阅读《会员协议》</p>
              <p  style="color:rgb(173, 173, 173)">2、支付完成后请刷新页面</p>
              <!-- <p>实付金额</p> -->
            </div>
            <div>
              <qrcode-vue v-if="wxQrCode" :value="wxQrCode" :size="90" level="H"/>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="display:flex;justify-content:center;align-items: center;">
      <!-- <div class="transparent-line1"></div> -->
      <img style="width:80px;height:20px" src="../../assets/image/flyleft.png"/>
      <h2 style="font-size:40px;color:#3662AE;margin:0 10px">权限对比介绍</h2>
      <img style="width:80px;height:20px" src="../../assets/image/flyright.png"/>

<!-- <div class="transparent-line"></div> -->
    </div>
    <div style="margin:20px 0;display:flex;flex-direction: column;align-items: center;justify-content: center;">
    <!-- <img style="width:860px" src="../../assets/image/vipList.png"/> -->
    <!-- <el-table :data="vipData" style="width: 80%">
    <el-table-column prop="control" label="控制项" width="180" />
    <el-table-column prop="tourist" :class="{'tourist':tab==0}" label="游客" width="180" />
    <el-table-column prop="register" label="注册会员" />
    <el-table-column prop="vip" label="VIP" />
    <el-table-column prop="svip" label="SVIP" />
    <el-table-column prop="enterpriseVip" label="企业VIP" />

  </el-table> -->
  <table class="table" style="position: relative;">
    <tr v-for="(row, rowIndex) in vipData" :key="rowIndex">
      <td
        v-for="(cell, cellIndex) in row"
        :key="cellIndex"
        style="width:180px"
        :class="{'firstCol':cellIndex=='control'||rowIndex==0,'Colvip':cellIndex=='vip'&&rowIndex==0,'Colsvip':cellIndex=='svip'&&rowIndex==0,'enterpriseVip':cellIndex=='enterpriseVip'&&rowIndex==0,'active':active==cellIndex||cellIndex==tab,'firstRow':rowIndex==0&&(active==cellIndex||cellIndex==tab),'lastRow':rowIndex==15&&(active==cellIndex||cellIndex==tab)}"
      >

      <img v-if="rowIndex==0&&tab=='vip'" style="z-index:9999;height:40px;width:40px;position: absolute;right: 361px;top:0" src="../../assets/image/vipSelect1.png"/>
      <img v-if="rowIndex==0&&tab=='svip'"  style="height:40px;width:40px;position: absolute;right: 181px;top:0" src="../../assets/image/vipSelect1.png"/>
      <img v-if="rowIndex==0&&tab=='enterpriseVip'"  style="height:40px;width:40px;position: absolute;right: 0;top:0" src="../../assets/image/vipSelect1.png"/>
      {{ cell }}
      </td>
    </tr>
  </table>
  </div>
  </div>
</template>

<script setup lang="ts">
import { useVipCenterHooks } from "./hooks";
import QrcodeVue from "qrcode.vue";
import { reactive,ref,computed } from "vue";


const priceItem = reactive([{name:'一年vip',price:365,des:'一元'},
{name:'一季度vip',price:365,des:'一元'},{name:'一月vip',price:365,des:'一元'}])
const vipData = reactive([
  {control:'控制项',register:'注册会员',vip:'VIP',svip:'SVIP',enterpriseVip:'企业VIP'},
{control:'区域定位',register:'区县级',vip:'市州级',svip:'省级',enterpriseVip:'省级'},
{control:'区域修改',register:'每年',vip:'每半年',svip:'每季度',enterpriseVip:'每月'},
{control:'资讯日期',register:'近半年',vip:'近1年',svip:'近3年',enterpriseVip:'近5年'},
{control:'附件详情',register:'不可见',vip:'不可见',svip:'可见',enterpriseVip:'可见'},
{control:'附件下载',register:'可下载',vip:'可下载',svip:'可下载',enterpriseVip:'可下载'},
{control:'政策图谱',register:'可见',vip:'可见',svip:'可见',enterpriseVip:'可见'},
{control:'资讯搜索',register:'10条',vip:'30条',svip:'100条',enterpriseVip:'500条'},
{control:'政策搜索',register:'3个',vip:'30个',svip:'100个',enterpriseVip:'150个'},
{control:'立项搜索',register:'10条',vip:'30条',svip:'100条',enterpriseVip:'500条'},
{control:'规划限制',register:'1次/季度',vip:'3次/季度',svip:'10次/季度',enterpriseVip:'50次/季度'},
{control:'规划留存',register:'1个',vip:'3个',svip:'10个',enterpriseVip:'50个'},
{control:'我的收藏',register:'5条',vip:'15条',svip:'50条',enterpriseVip:'250条'},
{control:'我的关注',register:'5条',vip:'15条',svip:'50条',enterpriseVip:'250条'},
{control:'浏览历史',register:'近3天',vip:'近7天',svip:'近1个月',enterpriseVip:'近1个季度'},
{control:'数据分析',register:'不可用',vip:'不可用',svip:'可用',enterpriseVip:'可用'}

])
const {
  currVipType,
  changeVipType,
  vipLevels,
  currVipLevelTypes,
  changeCurrVipLevelType,
  wxQrCode,
  zfbQrCode,
  userInfo,
  payPrice,
  priceList,
  vipList,
  vipType,
  rechargeVip,
  memberExpirationDate,
  vipId,
  vipPrice
} = useVipCenterHooks();
const tab = ref()
rechargeVip()
const active = ref('')

const changeTab = (val,index)=>{
  tab.value = val==0?'svip':val==1?'vip':val==2?'enterpriseVip':'svip'
}
changeTab()
const heightLine = (rowIndex,cellIndex)=>{
  active.value = cellIndex
}
// const memberExpirationDate = computed((time) => {
//       // const now = new Date();
//       // // 假设会员期限是一个月，可以根据需要调整
//       // // const expirationMonths = 1;
//       // now.setMonth(now.getMonth() + 1);
//       // return now.toISOString().split('T')[0];
//     });
    // console.log(memberExpirationDate.value)
</script>

<style scoped lang="postcss">
td{
  width: 140px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    border: 1px solid #FFFFFF;

}
td:nth-child(1){
background: #f5f5f5;
}
td:nth-child(2){
background: #e8e8e8;
}
td:nth-child(3){
background: #edf2f9;
}
td:nth-child(4){
background: #fff1dd;
}
td:nth-child(5){
background: #e6efff;

}
td:nth-child(6){
background: #aee9fb;
}
.enterpriseVip{
  background-color: #cddefb !important;
}
.Colvip{
  background-color: #d9e5f5 !important;
}
.Colsvip{
  background-color: #efd7b4 !important;
}
/* #9fe5fa #A97737*/
.firstCol{
  font-weight: 800;
  font-size: 20px;
  /* background-color: rebeccapurple !important; */
  /* color: red; */
}
.table{
.active{
  border-left: 3px solid #128bed !important;
  border-right: 3px solid #128bed !important;
  box-shadow: 10px 0 10px -10px #128bed,
             -10px 0 10px -10px #128bed;
}}
.firstRow{
  border-top: 3px solid #128bed;

}
.lastRow{
  border-bottom: 3px solid #128bed;

}
.tourist{
::v-deep .el-table__cell{
    border:1px solid red;
}
  }
.tourist2{
::v-deep .el-table__cell{
    border:1px solid red;
}
  }
.vip-center {
  @apply w-2/3 mx-auto mt-3 bg-white;
  max-width: 1110px;
  .vip{
  }
  position: relative;
  .carTopbg{
    position: relative;
    img{
      height: 120px;
    }
    .text{
      font-size: 40px;
      font-weight: 700;
      font-family: Microsoft YaHei;
      font-style: italic;
      position: absolute;
      z-index: 99999;
      left: 50px;
      bottom: 25px
    }
  }
  .priceBig{
    display: flex;
    justify-content: space-around;
    margin: 37px 0 15px 0;
    .price{
      height: 90px;
      width: 100px;
      padding:5px;
      border-radius:10px ;
      color:#2D2D2D;
      border: 1px solid #f3f3f3;

      display:flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      position: relative;
    }
    img{
      position:absolute;
      bottom: -1px;
      right: -1px;
    }
    .vipActive{
      background-color: #FDF8F0;
      color: #A97737;
      border: 1px solid #A97737;

    }
    .svipActive{
      background-color: #bddbff;
      color: #0680A5;
      border: 1px solid #0680A5;

    }
    .active{
      background-color: #DEF7FF;
      color: #0A70AF;
      border: 1px solid #0A70AF;
    }
  }
  .qrCode{
    /* margin-top: 20px; */
    color:black;
    display: flex;
    justify-content: space-around;
    margin: 10px 10px;
  }
  .openVip{
    width: 125px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    color: #FFFFFF;
    margin: auto;
    background-color: #88BAF9;
  }
.el-carousel{
  padding: 10px;
  /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); */
}
.el-carousel__item {
  background-color: #FFFFFF;
  border-radius: 29px;
  width: 430px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-content: center;
  flex-direction: column;
}

  /* .vip-header {
    @apply px-4 py-4 overflow-hidden rounded-t-lg pb-7;
    background: url("@/assets/image/texture_bg.jpg") no-repeat;
    background-size: 100%;
    .user-info {
      @apply flex text-white;
      .user-avatar {
        @apply rounded-full flex justify-center items-center bg-white overflow-hidden;
        width: 60px;
        height: 60px;
        box-shadow: 0 0 5px #999999;
        img {
          width: 45px;
          height: 45px;
        }
      }
      .user-desc {
        @apply flex flex-col justify-between py-1 ml-2;
        .user-name {
          @apply font-bold flex items-center;
          font-size: 16px;
        }
        .vip-desc {
          color: #ccccd7;
        }
      }
    }
  }
  .vip-content {
    .vip-level-tabs {
      @apply flex justify-between relative;
      height: 46px;
      background: #e8e8ed;
      .tab-item {
        @apply w-1/2 text-center absolute bottom-0 cursor-pointer;
        background: #e8e8ed;
        line-height: 46px;
      }
      .super-vip {
        @apply left-0;
      }
      .base-vip {
        @apply right-0;
      }
      .super-vip.active {
        @apply rounded-tl-xl;
        background: url("@/assets/image/tab_item_l_bg.png") no-repeat;
      }
      .base-vip.active {
        @apply rounded-tr-xl;
        background: url("@/assets/image/tab_item_r_bg.png") no-repeat;
      }
      .base-vip,
      .super-vip {
        &.active {
          background-size: 100% 100%;
          line-height: 60px;
          height: 60px;
        }
      }
    }
    .vip-level-list {
      @apply flex items-center px-7 py-4 justify-around;
      .vip-level-item {
        @apply relative rounded-lg text-center flex items-center flex-wrap justify-center py-3 cursor-pointer;
        width: 200px;
        height: 100px;
        border: 1px solid #f7e9d3;
        box-sizing: border-box;
        &.active {
          background: #fef9f2;
          border-color: #ae7427;
        }
        .vip-title {
          @apply font-bold;
          font-size: 16px;
          width: 200px;
        }
        .vip-price {
          font-size: 18px;
          color: #ae7427;
          span {
            font-size: 10px;
          }
        }
        .check-icon {
          @apply absolute;
          bottom: -2px;
          right: -2px;
        }
      }
    }
  }
  .pay-types {
    @apply px-10 pb-5;
    .title {
      @apply w-full text-center;
      .price {
        color: #f09035;
      }
    }
    .qr-codes {
      @apply w-full flex justify-center mt-10;
      .code-item {
        @apply flex justify-center flex-wrap;

        .code {
          @apply border p-2 flex justify-center items-center;
          width: 120px;
          height: 120px;
        }
        .item-title {
          @apply flex items-center justify-center w-full mt-2;
          font-size: 18px;
        }
      }
    }
  } */
}
.transparent-line1 {
  width: 100px; /* 线条的宽度 */
  height: 5px; /* 线条的高度 */
  background-image: linear-gradient(to right,rgba(0, 0, 0, 0), #3662AE);
}
.transparent-line {
  width: 100px; /* 线条的宽度 */
  height: 5px; /* 线条的高度 */
  background-image: linear-gradient(to right, #3662AE, rgba(0, 0, 0, 0));
}
</style>
